<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#fff" :fullscreen="true">
		<view class="page-message animate__animated animate__fadeIn">
			<cl-sticky>
				<view class="top">
					<Header tit="ACTIVITY CENTER" :title="t('activity.title')"></Header>
					<lxCalendar @change="change"></lxCalendar>
				</view>
			</cl-sticky>
			<view class="list">
				<view class="li">
					<image class="img" src="/static/images/banner1.jpg" mode="aspectFill"></image>
				</view>
				<view class="li">
					<image class="img" src="/static/images/banner2.jpg" mode="aspectFill"></image>
				</view>
				<view class="li">
					<image class="img" src="/static/images/guanggao2.png" mode="aspectFill"></image>
				</view>
				<cl-loadmore
					background-color="#fff"
					:loading="false"
					:finish="true"
					:text="$t('loadmore.text')"
					:loading-text="$t('loadmore.loadingText')"
					:finish-text="$t('loadmore.finishText')"
				></cl-loadmore>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import lxCalendar from "@/components/lx-calendar/lx-calendar.vue";
import Header from "@/components/header.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const change = (e: any) => {
	console.log(e);
};
</script>

<style lang="scss" scoped>
.page-message {
	.top {
		background-image: url("/static/images/rilibg.png");
		background-size: 100% 1000rpx;
		background-repeat: no-repeat;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}
	.list {
		padding: 30rpx;
		box-sizing: border-box;

		.li {
			width: 690rpx;
			height: 320rpx;
			background: #dedede;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 30rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
